<template>
	<div class="wrap">
		<h3>收货人信息</h3>
		<span class="publicspan">收货人姓名 : </span> <input type="text" class="name" v-model="name" placeholder="可以收货人姓名"/><br />
		<span class="publicspan">所在地区 :  &nbsp;</span><v-distpicker :province="select.province" :city="select.city" :area="select.area" class="liandong" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker><br />
		<span class="publicspan">详细地址 :  &nbsp;</span><input type="text" v-model="dress" class="dizhi"placeholder="用于接收货物的详细地址"/><br />
		<span class="publicspan">联系电话 :  &nbsp;</span><input type="text" v-model="phone" class="phone" placeholder="推荐使用手机号"/><br />
		<button class="btn" @click="trueaddress">确认并设为默认地址</button>
	</div>
</template>

<script>
	import VDistpicker from 'v-distpicker'
	export default{
		name:"newsite",
		components:{
			VDistpicker
		},
	data() {
	    return {
	    	name:"",
	    	dress:"",
	    	phone:"",
	    	province:"",
	    	city:"",
	    	area:"",
	    select: { province: '', city: '', area: '' }
	    }
	 },
	 methods:{
	 	trueaddress:function(){
	 		var _this=this
	 		if($(".name").val()==""){
	 			alert("姓名不能为空")
	 			return;
	 		}else if($(".dizhi").val()==""){
	 			alert("地址不能为空")
	 			return
	 		}else{
	 			this.axios.get('/api/address',{params:{
					name:_this.name,
					phone:_this.phone,
					site:_this.province+_this.city+_this.area+_this.dress
				}}).then(function(data){
					if(data.data.err==0){
						alert("添加失败")
					}else{
						alert("添加成功")
						window.location.href="#/oldsite"
					}
				})
	 		}
	 	},
	 	 onChangeProvince(a){
	          this.province = a.value;
	        },
	        onChangeCity(a){
	          this.city = a.value;
	        },
	        onChangeArea(a){	
	         this.city = a.value;
			}
	 }
	}
</script>

<style scoped>
	.wrap{
		width: 1280px;
		margin: 0 auto;
	}
	h3{
		margin-top: 20px;
		font-weight: 300;
		font-size: 16px;
	}
	.publicspan{
		display: inline-block;
		margin-top: 30px;
	}
	.name{
		width: 330px;
		height: 35px;
		padding-left: 10px;
		border-radius: 5px;
		border: 2px solid #d3d3d3;
	}
	.dizhi{
		width: 460px;
		height: 35px;
		padding-left: 10px;
		border-radius: 5px;
		border: 2px solid #d3d3d3;
	}
	.phone{
		width: 150px;
		height: 35px;
		border: 2px solid #d3d3d3;
		padding-left: 10px;
		border-radius: 5px;
	}
	.btn{
		width: 205px;
		height: 40px;
		background-color: #f08200;
		color: white;
		margin-left: 200px;
		margin-top: 20px;
		font-size: 16px;
		border-radius: 5px;
	}
	.liandong{
		display: inline-block;
		
	}
</style>